<template>
    <view class="container">
        <view v-if="moodRecord" class="mood-detail">
            <view class="mood-header">
                <text class="mood-date">{{ formatDate(moodRecord.recordDate) }}</text>
                <text 
                    class="mood-level"
                    :class="{
                        'mood-level-1': moodRecord.moodLevel === 1,
                        'mood-level-2': moodRecord.moodLevel === 2,
                        'mood-level-3': moodRecord.moodLevel === 3,
                        'mood-level-4': moodRecord.moodLevel === 4,
                        'mood-level-5': moodRecord.moodLevel === 5
                    }"
                >
                    {{ getMoodLevelLabel(moodRecord.moodLevel) }}
                </text>
            </view>

            <view class="mood-description">
                <text class="section-title">心情描述</text>
                <text class="description-text">{{ moodRecord.moodDescription }}</text>
            </view>

            <view class="mood-tags" v-if="moodRecord.moodTags">
                <text class="section-title">心情标签</text>
                <view class="tags-container">
                    <text 
                        v-for="tag in moodRecord.moodTags.split(',')" 
                        :key="tag" 
                        class="tag-item"
                    >
                        {{ tag }}
                    </text>
                </view>
            </view>

            <view class="mood-images" v-if="moodRecord.moodImages">
                <text class="section-title">心情图片</text>
                <view class="images-container">
                    <image 
                        v-for="(image, index) in moodRecord.moodImages.split(',')" 
                        :key="index"
                        :src="image"
                        mode="aspectFill"
                        class="mood-image"
                        @tap="previewImage(image)"
                    ></image>
                </view>
            </view>

            <view class="mood-extra-info">
                <view class="extra-item" v-if="moodRecord.location">
                    <text class="extra-label">位置：</text>
                    <text>{{ moodRecord.location }}</text>
                </view>
                <view class="extra-item" v-if="moodRecord.weather">
                    <text class="extra-label">天气：</text>
                    <text>{{ moodRecord.weather }}</text>
                </view>
                <view class="extra-item" v-if="moodRecord.activity">
                    <text class="extra-label">活动：</text>
                    <text>{{ moodRecord.activity }}</text>
                </view>
            </view>

            <view class="actions">
                <button class="edit-btn" @tap="editMoodRecord">编辑</button>
                <button class="delete-btn" @tap="deleteMoodRecord">删除</button>
            </view>
        </view>

        <view v-else class="loading">
            <text>加载中...</text>
        </view>
    </view>
</template>

<script>
import moodApi from '@/api/mood';

export default {
    data() {
        return {
            moodRecord: null,
            recordId: null
        }
    },
    onLoad(options) {
        this.recordId = options.id;
        this.fetchMoodRecordDetail();
    },
    methods: {
        async fetchMoodRecordDetail() {
            try {
                this.moodRecord = await moodApi.getMoodRecordById(this.recordId);
            } catch (error) {
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
            }
        },
        formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        },
        getMoodLevelLabel(level) {
            const labels = ['', '非常糟糕', '糟糕', '一般', '好', '非常好'];
            return labels[level];
        },
        previewImage(imageUrl) {
            uni.previewImage({
                urls: this.moodRecord.moodImages.split(','),
                current: imageUrl
            });
        },
        editMoodRecord() {
            uni.navigateTo({
                url: `/pages/mood-record/mood-record?id=${this.recordId}`
            });
        },
        deleteMoodRecord() {
            uni.showModal({
                title: '删除确认',
                content: '确定要删除这条心情记录吗？',
                success: async (res) => {
                    if (res.confirm) {
                        try {
                            await moodApi.deleteMoodRecord(this.recordId);
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success'
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);
                        } catch (error) {
                            uni.showToast({
                                title: '删除失败',
                                icon: 'none'
                            });
                        }
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.container {
    padding: 20rpx;
}

.mood-detail {
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.mood-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.mood-date {
    font-size: 28rpx;
    color: #666;
}

.mood-level {
    font-size: 28rpx;
    padding: 5rpx 10rpx;
    border-radius: 10rpx;
}

.mood-level-1 { background-color: #ff4d4f; color: white; }
.mood-level-2 { background-color: #ff7a45; color: white; }
.mood-level-3 { background-color: #ffa940; color: white; }
.mood-level-4 { background-color: #52c41a; color: white; }
.mood-level-5 { background-color: #13c2c2; color: white; }

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
}

.description-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
}

.tag-item {
    background-color: #f0f0f0;
    color: #666;
    font-size: 24rpx;
    padding: 5rpx 10rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    border-radius: 20rpx;
}

.images-container {
    display: flex;
    flex-wrap: wrap;
}

.mood-image {
    width: 200rpx;
    height: 200rpx;
    margin: 10rpx;
    border-radius: 10rpx;
}

.mood-extra-info {
    margin-top: 20rpx;
    padding: 10rpx;
    background-color: #f9f9f9;
    border-radius: 10rpx;
}

.extra-item {
    margin-bottom: 10rpx;
    font-size: 28rpx;
}

.extra-label {
    color: #666;
    margin-right: 10rpx;
}

.actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}

.edit-btn, .delete-btn {
    flex: 1;
    margin: 0 10rpx;
    font-size: 28rpx;
}

.edit-btn {
    background-color: #1aad19;
    color: white;
}

.delete-btn {
    background-color: #ff4d4f;
    color: white;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
}
</style> 